<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="container">
    <el-container class="home-container">
      <el-header>
        <div class="header">
          <h1>实 验 室 安 全 准 入 教 育</h1>
        </div>
        <el-button type="danger" @click="LookOut">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <el-menu
            :collapse-transition="false"
            background-color="rgb(35 127 163)"
            text-color="#fff"
            active-text-color="#000"
            unique-opened
            :router="true"
          >
            <el-submenu index="1">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>1.实验室安全运行规程</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/Section1_1"
                  >1.1 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/Section1_2"
                  >1.2 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/Section1_3"
                  >1.3 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/Section1_4"
                  >1.4 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/Section1_5"
                  >1.5 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/Section1_6"
                  >1.6 实验室安全运行规程</el-menu-item
                >
                <el-menu-item index="/SectionOne">1.7 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>2.化学危险品使用安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionTwo"
                  >2.1 化学危险品使用安全</el-menu-item
                >
                <el-menu-item index="/SectionTwo">2.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>3.实验室消防安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionThree"
                  >3.1 实验室消防安全</el-menu-item
                >
                <el-menu-item index="/SectionThree">3.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>4.实验室用电安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionFour"
                  >4.1 实验室用电安全</el-menu-item
                >
                <el-menu-item index="/SectionFour">4.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>5.实验室辐射防护安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionFive"
                  >5.1 实验室辐射防护安全</el-menu-item
                >
                <el-menu-item index="/SectionFive">5.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>6.机械加工类实验运行安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionSix"
                  >6.1 机械加工类实验运行安全</el-menu-item
                >
                <el-menu-item index="/SectionSix">6.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <!-- <i class="el-icon-location"></i> -->
                <span>7.生物医学类实验室运行安全</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/SectionSeven"
                  >7.1 生物医学类实验室运行安全</el-menu-item
                >
                <el-menu-item index="/SectionSeven">7.2 章节测试</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/AllQuesion">
              <template slot="title">
                <!-- <i class="el-icon-user"></i> -->
                <span>实验室安全准入考核</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <!-- 提交弹窗 -->
    <el-dialog title="提示" :visible.sync="OutlogVisible" width="30%" center>
      <span>退出后，将清空所有已填选项，是否继续？</span>
      <span slot="footer">
        <el-button @click="OutlogVisible = false">取 消</el-button>
        <el-button type="primary" @click="OutUp()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  created() {},
  data() {
    return {
      OutlogVisible: false,
    };
  },
  methods: {
    LookOut() {
      this.OutlogVisible = true;
    },
    // 退出登录
    OutUp() {
      localStorage.clear();
      sessionStorage.clear();
      this.$message.success("退出成功！");
      this.$router.push("/login");
    },
  },
};
</script>
  
  <style scoped>
h1 {
  color: #fff;
}
.container {
  height: 100%;
}
.home-container {
  height: 100%;
}
.el-header {
  background: linear-gradient(
    10deg,
    rgb(166, 177, 221) 0%,
    rgb(3, 86, 107) 100%
  );
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
}

.header img {
  width: 180px;
}
.el-aside {
  background: linear-gradient(
    10deg,
    rgb(166, 177, 221) 0%,
    rgb(3, 86, 107) 100%
  );
}

.el-aside .el-menu {
  border-right: none;
}

.el-main {
  height: 100%;
  background-color: #eaedf1;
}
.el-container.is-vertical {
  height: 100%;
  flex-direction: column;
}
.toggle-button {
  background: linear-gradient(
    60deg,
    rgb(207, 197, 182) 0%,
    rgb(83, 196, 8) 100%
  );
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
  